<template>
  <div class="l-rblock structure">
    <p class="structure-tip">
      * ( {{ tableName }} ) 为主表，字段名可进行修改，数据格式默认为 varchar
    </p>
    <p class="structure-tip structure-tip2">
      * 表名、字段名由数字、字母或下划线组成，且不能以数字，特殊字符串开头。
    </p>
    <p class="structure-tip structure-tip2">* 表名、字段名一旦生成不可修改。</p>
    <el-table :data="tableData" style="width: 100%" default-expand-all>
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-table
            :data="props.row.fieldList || props.row.children"
            style="width: 90%; margin-left: 55px"
            :row-class-name="rowClassName"
          >
          <el-table-column
            v-for="(value, id, index) in childColumns"
            :label="value.name"
            :prop="value.propName"
            :key="index"
          >
            <template slot-scope="scope">
              <el-input
                v-if="value.propName == 'field'"
                size="mini"
                v-model="scope.row.field"
                maxlength="30"
                oninput="value=value.replace(/[^\a-\z\A-\Z0-9\_]|^[0-9\_]/g,'')"
                :disabled="scope.row.fieldDisabled"
                placeholder="please enter字段名"
              ></el-input>
              <el-input
                v-if="value.propName == 'fieldLong'"
                size="mini"
                :disabled="scope.row.fieldFormat == 'varchar' ? false : true"
                v-model.number="scope.row.fieldLong"
                placeholder="please enter长度"
                oninput="value=value.replace(/[^\d]/g,'')"
                @change="
                  Number(scope.row.fieldLong)
                    ? Number(scope.row.fieldLong) > 500
                      ? (scope.row.fieldLong = 500)
                      : Number(scope.row.fieldLong) < 0
                      ? (scope.row.fieldLong = 0)
                      : (scope.row.fieldLong = scope.row.fieldLong)
                    : (scope.row.fieldLong = 0)
                "
              ></el-input>
              <l-select
                v-if="value.propName == 'fieldFormat'"
                :options="formatOptions"
                v-model="scope.row.fieldFormat"
                @change="
                  scope.row.fieldFormat !== 'varchar'
                    ? (scope.row.fieldLong = null)
                    : (scope.row.fieldLong = 200)
                "
                :clearable="false"
              ></l-select>
              <span v-if="value.propName == 'label'">{{
                scope.row.label
              }}</span>
            </template>
          </el-table-column>
        </el-table>
        </template>
      </el-table-column>
      <!-- 对外层的表格表头进行了遍历循环 -->
      <el-table-column
        v-for="(value, key, index) in parentsCloums"
        :label="value.name"
        :prop="value.propName"
        :key="index"
      >
        <template slot-scope="scope">
          <el-input
            v-if="value.propName == 'table'"
            size="mini"
            v-model="scope.row.table"
            maxlength="30"
            oninput="value=value.replace(/[^\a-\z\A-\Z0-9\_]|^[0-9\_]/g,'')"
            :disabled="scope.row.tableDisabled"
            placeholder="please enter表名"
          ></el-input>
          <el-input
            v-if="value.propName == 'tableNotes'"
            size="mini"
            v-model="scope.row.tableNotes"
            placeholder="please enter备注"
          ></el-input>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      parentsCloums: [
        //外层table的表头
        {
          name: "表名",
          id: "table",
          propName: "table",
        },
        {
          name: "备注",
          id: "tableNotes",
          propName: "tableNotes",
        },
      ],
      childColumns: [
        //内层table的表头
        {
          name: "字段名",
          id: "field",
          propName: "field",
        },
        {
          name: "长度",
          id: "fieldLong",
          propName: "fieldLong",
        },
        {
          name: "数据格式(默认varchar)",
          id: "fieldFormat",
          propName: "fieldFormat",
        },
        {
          name: "备注",
          id: "label",
          propName: "label",
        },
      ],
      formatOptions: [
        { value: "varchar", label: "短文本" },
        { value: "text", label: "长文本" },
        { value: "int", label: "整数" },
        { value: "decimal", label: "小数" },
        { value: "datetime", label: "时间日期" },
      ],
      tableData: [],
      designData: {},
      tabList: [],
      belongType: ['btn']
    };
  },
  computed: {
    tableName: {
      get() {
        return this.tableData[0] ? this.tableData[0].table : "";
      },
      set() {},
    },
    tableNotes: {
      get() {
        return this.tableData[0] ? this.tableData[0].tableNotes : "";
      },
      set() {},
    },
  },
  methods: {
    setForm(data, mainName) {
      this.designData = data;
      const tabList = [];

      const tableNotes = data.tableInfo ? data.tableInfo.tableNotes || "" : "";
      let m = 0;
      let n = 0;
      const tableName = mainName || "table" + parseInt(new Date().getTime() / 1000) + m;
      m++;
      this.tableData = [];
      const tableObj = {
        table: tableName,
        tableNotes: tableNotes,
        tableDisabled:
          mainName ? true : false,
        fieldList: [],
      };
      const list = [];
      data.tabList.map((tab) => {
        this.compList = tab.components;
        const comList = [];
        this.compList.map((com) => {
          if (
            ![
              "card",
              "collapse",
              "tab",
              "divider",
              "lable",
              "viewtable",
              "btn",
              "gridtable",
              "qrcode",
              "barcode",
              "tableLayout"
            ].includes(com.type) &&
            !com.isNotSave
          ) {
            com = {
              ...com,
              field: com.field
                ? com.field
                : "field" + parseInt(new Date().getTime() / 1000) + n,
              fieldLong: com.fieldLong
                ? com.fieldLong
                : com.fieldFormat == "varchar" || !com.fieldFormat
                ? 200
                : null,
              fieldFormat: com.fieldFormat ? com.fieldFormat : "varchar",
              fieldDisabled: com.field ? true : false,
            };
            n++;
            tableObj.fieldList.push(com);
          }

          if (["gridtable"].includes(com.type)) {
            const subTable =
              "table" + parseInt(new Date().getTime() / 1000) + m;
            m++;
              const gridObj = {
              ...com,
              table: com.table ? com.table : subTable,
              tableNotes: com.tableNotes ? com.tableNotes : ``,
              tableDisabled: com.table ? true : false,
            };
            com = gridObj;
            const listItem = [];
            com.children.map((item) => {
              if (!["btn"].includes(item.type)) {
                item = {
                  ...item,
                  field: item.field
                    ? item.field
                    : "field" + parseInt(new Date().getTime() / 1000) + n,
                  fieldLong: item.fieldLong
                    ? item.fieldLong
                    : item.fieldFormat == "varchar" || !item.fieldFormat
                    ? 200
                    : null,
                  fieldFormat: item.fieldFormat ? item.fieldFormat : "varchar",
                  fieldDisabled: item.field ? true : false,
                };
                n++;
                listItem.push(item);
              } else {
                listItem.push(item);
              }
            });
            gridObj.children = listItem;
            this.tableData.push(gridObj);
            this.$set(com, "children", listItem);
          }
          list.push(com);
          comList.push(com);
        });
        tabList.push({
          ...tab,
          components: comList,
        });
      });
      this.tableData.unshift(tableObj);
      this.tabList = tabList;
    },
    getForm() {
      for (let i = 0; i < this.tableData.length; i++) {
        if (!this.tableData[i].table) {
          this.$message({
            type: "error",
            message: "请填写表名!",
          });
          return false;
        }
        for (
          let j = 0;
          j <
          (this.tableData[i].fieldList
            ? this.tableData[i].fieldList.length
            : this.tableData[i].children.length);
          j++
        ) {
          const fieldList =
            this.tableData[i].fieldList || this.tableData[i].children;
          if (!fieldList[j].field && fieldList[j].type!=='btn') {
            this.$message({
              type: "error",
              message: "请填写字段名!",
            });
            return false;
          }
          if (fieldList[j].field && fieldList[j].field.toLowerCase() == "f_id") {
            this.$message({
              type: "error",
              message: "字段名不能设置为f_id!",
            });
            return false;
          }
        }
      }
      const list = [];
      this.tabList.map((tab) => {
        let tabcoms = [];
        tab.components.map((com) => {
          if (
            ![
              "card",
              "collapse",
              "tab",
              "tableLayout",
              "divider",
              "lable",
              "viewtable",
              "btn",
              "gridtable",
              "qrcode",
              "barcode"
            ].includes(com.type) &&
            !com.isNotSave
          ) {
            tabcoms.push({
              ...com,
              table: this.tableName,
            });
          } else if (["gridtable"].includes(com.type)) {
            const comp = [];
            for (let j = 0; j < com.children.length; j++) {
              const item = com.children[j];
              if (["btn"].includes(item.type)) {
                comp.push(item);
              } else {
                comp.push({
                  ...item,
                  table: com.table,
                });
              }
            }
            tabcoms.push({
              ...com,
              children: comp,
            });
          } else tabcoms.push(com);
        });

        list.push({
          ...tab,
          components: tabcoms,
        });
      });
      return {
        formInfo: {
          ...this.designData,
          tabList: list,
          tableInfo: {
            tableName: this.tableName,
            tableNotes: this.tableNotes,
          },
        },
        tableData: this.tableData,
      };
    },
    resetForm() {
      this.tableName = "";
      this.tableData = [];
    },
    rowClassName({ row }) {  
      if (!this.belongType.length) {  
        return;  
      }  
      if (this.belongType.includes(row.type)) {  
        return 'showRow';
      }  
    },  
  },
};
</script>

<style>
.structure {
  padding: 10px;
  overflow: auto;
  font-size: 12px;
}
.structure-tip {
  font-size: 12px;
  font-weight: 400;
  color: #c0c4cc;
  line-height: 30px;
}
.structure-tip2 {
  color: #f56c6c;
}
.structure .el-table .el-table__cell {
  padding: 4px 0;
}
.structure .el-table td.el-table__cell,
.el-table th.el-table__cell.is-leaf {
  border-bottom: none;
}
.structure .el-input.is-disabled .el-input__inner {
  background-color: #f5f7fa !important;
}
.showRow {  
  display: none; /* 隐藏该类名的元素 */  
}
</style>